<template> <div :id="id" v-resize class="base"></div></template>

<script>
export default {
  name: "HomePageStatistics",
  props: {
    id: {
      type: String,
      default() {
        return "";
      }
    },
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      myChart: undefined
    };
  },

  methods: {
    destroyLine() {
      this.myChart.dispose();
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例

      this.myChart = this.$echarts.init(
        document.getElementById(this.$props.id)
      );
      // 绘制图表
      this.myChart.setOption({
        title: {
          text: this.$props.data.title
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        xAxis: {
          data: this.$props.data.date
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: this.$props.data.nums,
            type: "line",
            name: this.$props.data.company
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.base {
  height: 326px;
  width: calc(100% - 20px);
  margin-top: 10px;
  background-color: $--color-white;
  padding: 20px 10px;
}
</style>
